<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0051)http://webstandard.kulando.de/static/css3-windows-7 -->
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" dir="ltr"><HEAD><META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<TITLE>CSS3 Tutorial - Windows 7 mit CSS3 und jQuery</TITLE>
<style>
* {
	margin:0;
	padding:0;
}
html {
	height:100%;
	width:100%;
}
body {
	background:#FFF url(bg.jpg) no-repeat 50% 50%;
	height:100%;
	width:100%;
	overflow:hidden;
	font:normal 12px/16px "Segoe UI",Arial,sans-serif;
}
a{
	text-decoration: underline;
	color:#00F;
}
.panel {
	border:1px solid #898C95;
	background-color:#FFF;
	padding:5px;
	clear: both;
}
.panel p {
	margin:10px;
}
.tabs{
	list-style:none;
	padding:0 2px;
	margin:0;
}
.tabs li{
	float: left;
	margin:2px 0 0 0;
    padding:0;
	background-color:#EBEBEB;
	background-image: -moz-linear-gradient(top, #F2F2F2, #CFCFCF);
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F2F2F2), to(#CFCFCF), color-stop(.5,#EBEBEB),color-stop(.5,#DDDDDD));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#CFCFCF');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#CFCFCF')";
	border:1px solid #898C95;
	border-bottom-width:0;
	position:relative;
	overflow:visible;
}
.tabs li a{
	display:block;
	text-decoration:none;
	color:#000;
	border:1px solid #FFF;
	border-bottom: none;
	padding:1px 4px;
	margin:0;
}
.tabs li:hover{
	background-color:#D9F0FC;
	background-image: -moz-linear-gradient(top, #EAF6FD, #A7D9F5);
	background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EAF6FD), to(#A7D9F5), color-stop(.5,#D9F0FC),color-stop(.5,#BEE6FD));
	    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAF6FD', endColorstr='#A7D9F5');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#EAF6FD', endColorstr='#A7D9F5')";
	border-color: #3C7FB1;
	outline:none;
}
.tabs li.selected{
		filter: none;
    -ms-filter: none;
	background-color:#FFF;
	background-image: none;
	border:1px solid #898C95;
	border-bottom: none;
	margin:0 -2px -1px;
	z-index:1001;
}
.tabs li.selected a{
	padding:2px 6px 3px;
}
.taskbar,.window{
	background:rgba(255,255,255,0.25) url(bgblur.jpg) no-repeat 50% 50%;
	background-attachment:fixed;
	border:1px solid #000;
	-moz-box-shadow:0 0 0 1px #eee inset, 0 0 15px rgba(0,0,0,0.9);
	-webkit-box-shadow:0 0 0 1px #eee inset, 0 0 15px rgba(0,0,0,0.9);
	box-shadow:0 0 0 1px #eee inset, 0 0 15px rgba(0,0,0,0.9);
}
.taskbar{
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	height:50px;
	z-index:50;
}
.window {
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	width:400px;
	height:250px;
	position:absolute;
	top:385px;
	left:285px;
	z-index:1;
	overflow:hidden;
	padding:6px;
}
.window .title {
	background:transparent url(http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/firefox_favicon.png) no-repeat 6px 0px;
	color:#000;
	cursor:move;
	font:normal 12px/16px "Segoe UI",Arial,sans-serif;
	overflow:hidden;
	padding:0 0 5px 28px;
	text-overflow:ellipsis;
	text-shadow:0 0 1px #fff, 3px 3px 5px #fff, -3px -3px 5px #fff, -3px 3px 5px #fff, 3px -3px 5px #fff;
	white-space:nowrap;
}
.window .inner {
	-moz-border-radius:1px;
	-webkit-border-radius:1px;
	border-radius:1px;
	border:1px solid #666;
	-moz-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
	-webkit-box-shadow:0 0 0 1px rgba(255,255,255,0.65);
	box-shadow:0 0 0px 1px rgba(255,255,255,0.65);
	background-color: #F0F0F0;
	height:100%;
	margin:0;
	overflow:auto;
	padding:10px;
	position:relative;
}
.window .inner p {
	margin-bottom:10px;
}
.window .inner img {
	background-color:#f1f1f1;
	border:1px solid #ddd;
	float:left;
	margin:0 20px 10px 0;
	padding:1px;
}
.davidxl {
	width:550px;
	height:300px;
	top:20px;
	left:20px;
}
.davidxl .inner {
	overflow: hidden;
	padding:0;
}
.misc {
	width:400px;
	height:300px;
	top:20px;
	left:600px;
}
.misc .inner {
	overflow: hidden;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<SCRIPT type="text/javascript" src="./CSS3 Tutorial - Windows 7 mit CSS3 und jQuery_files/jquery-ui-1.7.2.min.js"></SCRIPT>
<SCRIPT type="text/javascript">
//Draggable
$(document).ready(function() {
	$(".window").draggable({ 
		cancel: '.inner',
		containment: 'body',
		scroll: false,
		stack: { group: '.window', min: 1 }
	});
	var tabContainers = $('.misc .panel');
	tabContainers.hide().filter(':first').show();
	tabs = $('.misc ul.tabs li');
	
	$('.misc ul.tabs a').click(function () {
		tabContainers.hide();
		tabContainers.filter(this.hash).show();
		tabs.removeClass('selected');
		$(this).parent().addClass('selected');
		return false;
	}).filter(':first').click();
});
</SCRIPT>
</HEAD>
<BODY>
<div class="taskbar"></div>
<div class="window davidxl">
    <H4 class="title">DavidXL</H4>
    <div class="inner">
    	<iframe src="http://davidxl.blogspot.com/" frameborder="0" width="100%" height="100%"></iframe>
    </div>
</div>
<div class="window misc">
    <H4 class="title">Misc</H4>
    <div class="inner">
        	<ul class="tabs">
            	<li><a href="#A">Settings</a></li>
                <li><a href="#B">Tab B</a></li>
                <li><a href="#C">About</a></li>
                <li><a href="#D">Tab D</a></li>
            </ul> 
    <div id="A" class="panel"></div>
    <div id="B" class="panel"></div>
    <div id="C" class="panel"></div>
    <div id="D" class="panel"></div>
    </div>
</div>
<div class="window">
    <H4 class="title">Empty Window</H4>
</div>

</BODY>
</HTML>